<template>
  <ul class="cate">
    <li
      v-for="(item, index) in list"
      :key="index"
      @click="change(item.desc)"
      :class="{ active: item.desc == flag }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
export default {
  props: {
    list: Array,
  },
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      flag: localStorage.getItem("desc") || "",
      //要是本地存储里有值就从里面拿没有的话就是空
    });
    const change = (desc) => {
      data.flag = desc;
      localStorage.setItem("desc", data.flag);
      //存在本地存储里
      ctx.emit("select", data.flag);
      //把 当前选中的英文描述传到父组件
    };
    return { ...toRefs(data), change };
  },
};
</script>

<style lang="scss">
.cate {
  display: flex;
  li {
    flex: 1;
    height: 30px;
    border: 1px solid rgb(70, 125, 96);
    box-sizing: border-box;
  }
  .active {
    background: rgb(73, 92, 73);
    color: #fff;
  }
}
</style>
